<template>
  <el-dialog
    :close-on-click-modal="false"
    :show-close="false"
    :title="isAdd?'新增权限':'修改权限'"
    :visible.sync="isEdit"
  >
    <el-form
      :rules="rules"
      ref="ruleForm"
      :model="form"
      label-width="120px"
      size="small"
      class="form-box"
    >
      <el-form-item label="节点名称" prop="name">
        <el-input type="text" v-model="form.name" placeholder="请输入节点名称"></el-input>
      </el-form-item>
      <el-form-item label="是否都为菜单">
        <el-switch v-model="is_menu"></el-switch>
      </el-form-item>
      <el-form-item label="icon">
        <uploadImg @bindSendImg="propImg" :imgUrl="form.icon"></uploadImg>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权限模块">
        <el-select v-model="form.module_id" placeholder="请选择权限模块">
          <el-option v-for="item in moduleList" :key="item.id" :label="item.module" :value="item.id"></el-option></el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="text" v-model="form.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item label="前端访问路径">
        <el-input type="text" v-model="form.route_path" placeholder="请输入前端访问路径"></el-input>
      </el-form-item>
      <el-form-item label="请求路径">
        <el-input type="text" v-model="form.path" placeholder="请输入请求路径"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input type="text" v-model="form.sort" placeholder="越大越靠后"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('closeDialog')" size="small">取消</el-button>
      <el-button @click="submitFormAdd('ruleForm')" type="primary" size="small">确定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
import systemApi from "@/api/system";
import uploadImg from "@/components/uploadImg/index.vue";
@Component({
  components: {uploadImg}
})
export default class supplierEditDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  check:boolean = true//防重复提交
  @Prop() moduleList!:any;
  @Prop(Boolean) isEdit!: boolean;
  @Prop(Boolean) isAdd!: boolean;
  @Prop(Boolean) isMenu!: boolean;
  @Provide() is_menu:  boolean = false;
  @Provide() headers: any = {token:localStorage.getItem("tsToken")};//上传图片请求头
  @Provide() url: string = process.env.VUE_APP_URL+'/manage/auth/getDefaultGroup'; 
  @Prop(Object) form!:{
    id:any,
    name: string,
    is_menu:number,
    icon:string,
    module_id:number,
    parent_id:any,
    remark:string,
    route_path:string,
    path:string,
    sort:any
  }
  @Provide() rules: any = {
    name: [{ required: true, message: "请输入节点名称", trigger: "blur" }],
  };

  // 取消
  cancel(){
    this.$router.push({
      path:'/systemList'
    })
  }
  // 上传图片子组件传递过来的图片路径
  propImg(imgPath: any){
    this.form.icon = imgPath;
  }
  // 提交
  submitFormAdd(formName: any) {
    (this.$refs[formName] as any).validate((valid: boolean) => {
      if (valid) {
        if(this.is_menu==true){
          this.form.is_menu=1
        }else{
          this.form.is_menu=0
        }

          // this.form.module_id = 1
        if(this.check) {
          let _this = this
          _this.check = false
          systemApi.saveSystem(_this.form)
          .then((res: any) => {
            if(res.data.status){
              _this.$message({
                message: '操作成功',
                type: "success"
              });
              _this.$emit("closeDialog");
              _this.$emit("loadData")
              setTimeout(function(){
                _this.check = true
              },3000)
            }else{
              _this.$message({
                message: res.data.msg,
                type: "error"
              });
              _this.check = true
            }
          });
        }
          
      }
    });
  }
  handleAvatarSuccess(res:any, file:any) {
    this.form.icon = res.data.fileUrl;
  }
  beforeAvatarUpload(file:any) {
    const isJPG = file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 1;

    if (!isJPG) {
      this.$message.error('上传头像图片只能是 png 格式!');
    }
    if (!isLt2M) {
      this.$message.error('上传头像图片大小不能超过 1MB!');
    }
    return isJPG && isLt2M;
  }
  created() {
    this.is_menu = this.isMenu;
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  .el-input,
  .el-select {
    width: 200px !important;
  }
}
</style>
